<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--向 <nav> 标签添加 class .navbar、.navbar-default。添加 role="navigation"，有助于增加可访问性。-->
		<!--向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。-->
		<!--为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可-->
		<!--向 .navbar class 添加 class .navbar-fixed-top或 .navbar-fixed-bottom使导航栏固定到顶部或底部-->
		<!--添加 .navbar-static-top class。创建能随着页面一起滚动的导航栏-->
		<!--为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding）-->
		<!--带有黑色背景白色文本的倒置的导航栏，需向 .navbar class 添加 .navbar-inverse class-->
		<nav class="nav navbar-default" role="navigation" id="navbar-example">
			<div class="container-fluid">
				<div class="navbar navbar-header">
					<!--折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。-->
					<button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
						<!--三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮-->
						<span class="sr-only">切换导航</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#" class="navbar-brand">菜鸟教程</a>
				</div>
				<!--折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中-->
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<!--使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件-->
					<ul class="nav navbar-nav navbar-left">
						<!--导航栏导航组件内使用图标-->
						<li><a href="#zhuce"><span class="glyphicon glyphicon-user"></span>注册</a></li>
						<li><a href="#login"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
						<li><a href="#java"><span class="glyphicon glyphicon-log-in"></span>JAVA</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								java<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">注册人</a></li>
								<li class="divider"></li>
								<li><a href="#">登录人</a></li>
								<li class="divider"></li>
								<li><a href="#">aaa</a></li>
							</ul>
						</li>
					</ul>
					<!--导航栏中的表单使用 .navbar-form class。确保表单适当的垂直对齐和在较窄的视口中折叠的行为。-->
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search" />
						</div>
						<button type="submit" class="btn btn-default">搜索</button>
					</form>
					<!--可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。-->
					<!--不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。-->
					<button type="button" class="btn btn-default navbar-btn navbar-left">
						导航栏按钮
					</button>
						<!--如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。-->
					<p class="navbar-text navbar-left">相左对齐文本 Runoob用户登录</p>
					<!--向右对齐-->
			        <ul class="nav navbar-nav navbar-right">
			            <li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
			                    Java <b class="caret"></b>
			                </a>
			                <ul class="dropdown-menu">
			                    <li><a href="#">jmeter</a></li>
			                    <li><a href="#">EJB</a></li>
			                    <li><a href="#">Jasper Report</a></li>
			                    <li class="divider"></li>
			                    <li><a href="#">分离的链接</a></li>
			                    <li class="divider"></li>
			                    <li><a href="#">另一个分离的链接</a></li>
			                </ul>
			            </li>
			        </ul>
			        <form class="navbar-form navbar-right" role="search">
			            <button type="submit" class="btn btn-default">
			                向右对齐-提交按钮
			            </button>
			        </form>
			        <p class="navbar-text navbar-right">向右对齐-文本</p>
			        <ol class="breadcrumb">
					    <li><a href="#">Home</a></li>
					    <li><a href="#">2013</a></li>
					    <li class="active">十一月</li>
					</ol>
				</div>
			</div>
		</nav>
		<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
		   <h4 id="zhuce">iOS</h4>
    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
        TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
    </p>
    <h4 id="login">SVN</h4>
    <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
    </p>
    <h4 id="java">JAVA</h4>
    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
    </p>
		</div>
	</body>
</html>
